<template>
  <div class="leftmiddlebox" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var chartDom = document.querySelector(".leftmiddlebox");
    var myChart = echarts.init(chartDom);
    // 设置配置项
    let option = {
      title: {
        text: "大洲感染总人数趋势图",
        //  居中对齐
        textAlign: "center",
        //  标题水平位置
        left: "50%",
        // 标题样式
        textStyle: {
          fontSize: "10",
          color: "#ffffff", 
          // 字体加粗
          fontWeight:"normal",
        },
      },
      // x轴
      xAxis: {
        // 当前坐标轴为类目轴
        type: "category",
        data: ["02/14", "04/11", "06/06", "08/01", "09/26", "11/21"],
        // 是否有间隙
        boundaryGap: false,
        axisLabel: {
          color: "#4c9bfd",
        },
        // 坐标轴轴线
        axisLine: {
          lineStyle: {
            color: "#4c9bfd",
          },
        },
        //刻度
        axisTick: {
          lineStyle: {
            color: "#4c9bfd",
          },
        },
      }, 
      yAxis: {
        type: "value", //  当前坐标轴为数值轴
        show: true,
        axisLabel: {
          color: "#4c9bfd",
        },
        //  分割线
        splitLine: {
          lineStyle: {
            color: "#012f4a",
          },
        },
        // 坐标轴轴线
        axisLine: {
          show: true,
          lineStyle: {
            color: "#012f4a",
          },
        },
      },
      //  图例
      legend: {
        // 位置
        left: "15%",
        top: "8%",
        textStyle: {
          // 文字
          color: "#4997f7",
        },
      },
      // 提示
      tooltip: {
        //   鼠标放在坐标轴的时候   显示tooltip
        trigger: "axis",
        axisPointer: {
          //  十字交叉类型
          type: "cross",
        },
        backgroundColor: "rgba(0, 0, 0,0.7)", //  tooltip的背景色
        textStyle: {
          color: "#fefefe", //  tooltip文字
        },
      },
      // 系列
      series: [
        {
          type: "line",
          name: "亚洲",
          data: [212, 70863, 70863, 70863, 70863, 70863],
        },
        {
          type: "line",
          name: "其他",
          data: [218, 712, 712, 712, 712, 712],
        },
        {
          type: "line",
          name: "北美洲",
          data: [28196986, 33078975, 36170082, 36170082, 7244184, 12274726],
        },
        {
          type: "line",
          name: "大洋洲",
          data: [15, 4086, 4086, 4086, 4086, 4086],
        },
        {
          type: "line",
          name: "欧洲",
          data: [3056078, 3347512, 3986045, 4782646, 735198, 1589219],
        },
      ],
      grid: {
        top: "20%",
        left: "20%",
        right: "10%",
        bottom: "10%",
        borderolor: "#012f4a",
        show: true,
      },
    };

    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
</style>